<template>
	<view class="photo1">
		<view> <img ref="img1" class="Img1" /></view>
		<view> <img ref="img2" class="Img2" /></view>
	</view>
  </template>
  
  <script>
   import Bus from '../utils/EventBus';

	  export default {
	   data(){
		  return{
		   SXid:'',
		   ClearButton:'',
		   SXTimer:null,
		   sliderData:[],	//老鼠，兔，蛇 //牛，虎，龙，马，猪 //羊，猴，鸡，狗 
		   touShuData:[
			  {url:'../../static/4x/toushu/toushu01.png'},
			  {url:'../../static/4x/toushu/toushu02.png'},
			  {url:'../../static/4x/toushu/toushu03.png'},
			  {url:'../../static/4x/toushu/toushu04.png'},
			  {url:'../../static/4x/toushu/toushu05.png'},
			  {url:'../../static/4x/toushu/toushu06.png'},
			  {url:'../../static/4x/toushu/toushu07.png'},
			  {url:'../../static/4x/toushu/toushu08.png'},
			  {url:'../../static/4x/toushu/toushu09.png'}
			 ],
		   shuMuData:[
			  {url:'../../static/4x/shumu/shumu01.png'},
			  {url:'../../static/4x/shumu/shumu02.png'},
			  {url:'../../static/4x/shumu/shumu03.png'},
			  {url:'../../static/4x/shumu/shumu04.png'},
			  {url:'../../static/4x/shumu/shumu05.png'},
			  {url:'../../static/4x/shumu/shumu06.png'},
			  {url:'../../static/4x/shumu/shumu07.png'},
			  {url:'../../static/4x/shumu/shumu08.png'},
			  {url:'../../static/4x/shumu/shumu09.png'},
			  {url:'../../static/4x/shumu/shumu10.png'}
		   ],
		   niuQiData:[
			  {url:'../../static/4x/niuqi/niuqi01.png'},
			  {url:'../../static/4x/niuqi/niuqi02.png'},
			  {url:'../../static/4x/niuqi/niuqi03.png'},
			  {url:'../../static/4x/niuqi/niuqi04.png'},
			  {url:'../../static/4x/niuqi/niuqi05.png'},
			  {url:'../../static/4x/niuqi/niuqi06.png'},
			  {url:'../../static/4x/niuqi/niuqi07.png'},
			  {url:'../../static/4x/niuqi/niuqi08.png'},
			  {url:'../../static/4x/niuqi/niuqi09.png'},
			  {url:'../../static/4x/niuqi/niuqi10.png'},
			  {url:'../../static/4x/niuqi/niuqi11.png'},
			  {url:'../../static/4x/niuqi/niuqi12.png'}
		   ],
		   duiNiuData:[
			  {url:'../../static/4x/duiniu/duiniu01.png'},
			  {url:'../../static/4x/duiniu/duiniu02.png'},
			  {url:'../../static/4x/duiniu/duiniu03.png'},
			  {url:'../../static/4x/duiniu/duiniu04.png'},
			  {url:'../../static/4x/duiniu/duiniu05.png'},
			  {url:'../../static/4x/duiniu/duiniu06.png'}
		   ],
		   ruHuData:[
			  {url:'../../static/4x/ruhu/ruhu01.png'},
			  {url:'../../static/4x/ruhu/ruhu02.png'},
			  {url:'../../static/4x/ruhu/ruhu03.png'},
			  {url:'../../static/4x/ruhu/ruhu04.png'},
			  {url:'../../static/4x/ruhu/ruhu05.png'},
			  {url:'../../static/4x/ruhu/ruhu06.png'},
			  {url:'../../static/4x/ruhu/ruhu07.png'},
			  {url:'../../static/4x/ruhu/ruhu08.png'},
			  {url:'../../static/4x/ruhu/ruhu09.png'}
		   ],
		   huDouData:[
			  {url:'../../static/4x/hudou/hudou01.png'},
			  {url:'../../static/4x/hudou/hudou02.png'},
			  {url:'../../static/4x/hudou/hudou03.png'},
			  {url:'../../static/4x/hudou/hudou04.png'},
			  {url:'../../static/4x/hudou/hudou05.png'},
			  {url:'../../static/4x/hudou/hudou06.png'},
			  {url:'../../static/4x/hudou/hudou07.png'},
			  {url:'../../static/4x/hudou/hudou08.png'},
			  {url:'../../static/4x/hudou/hudou09.png'},
			  {url:'../../static/4x/hudou/hudou10.png'},
			  {url:'../../static/4x/hudou/hudou11.png'},
			  {url:'../../static/4x/hudou/hudou12.png'}
		   ],
		   daiTuData:[
			  {url:'../../static/4x/daitu/daitu01.png'},
			  {url:'../../static/4x/daitu/daitu02.png'},
			  {url:'../../static/4x/daitu/daitu03.png'},
			  {url:'../../static/4x/daitu/daitu04.png'},
			  {url:'../../static/4x/daitu/daitu05.png'},
			  {url:'../../static/4x/daitu/daitu06.png'},
			  {url:'../../static/4x/daitu/daitu07.png'},
			  {url:'../../static/4x/daitu/daitu08.png'},
			  {url:'../../static/4x/daitu/daitu09.png'},
			  {url:'../../static/4x/daitu/daitu10.png'},
			  {url:'../../static/4x/daitu/daitu11.png'},
			  {url:'../../static/4x/daitu/daitu12.png'},
			  {url:'../../static/4x/daitu/daitu13.png'}
		   ],
		   tuoTuData:[
			  {url:'../../static/4x/tuotu/tuotu01.png'},
			  {url:'../../static/4x/tuotu/tuotu02.png'},
			  {url:'../../static/4x/tuotu/tuotu03.png'},
			  {url:'../../static/4x/tuotu/tuotu04.png'},
			  {url:'../../static/4x/tuotu/tuotu05.png'},
			  {url:'../../static/4x/tuotu/tuotu06.png'},
			  {url:'../../static/4x/tuotu/tuotu07.png'},
			  {url:'../../static/4x/tuotu/tuotu08.png'},
			  {url:'../../static/4x/tuotu/tuotu09.png'},
			  {url:'../../static/4x/tuotu/tuotu10.png'},
			  {url:'../../static/4x/tuotu/tuotu11.png'},
			  {url:'../../static/4x/tuotu/tuotu12.png'},
			  {url:'../../static/4x/tuotu/tuotu13.png'},
			  {url:'../../static/4x/tuotu/tuotu14.png'},
			  {url:'../../static/4x/tuotu/tuotu15.png'},
			  {url:'../../static/4x/tuotu/tuotu16.png'}
		   ],
		   longMaData:[
			  {url:'../../static/4x/longma/longma01.png'},
			  {url:'../../static/4x/longma/longma02.png'},
			  {url:'../../static/4x/longma/longma03.png'},
			  {url:'../../static/4x/longma/longma04.png'},
			  {url:'../../static/4x/longma/longma05.png'},
			  {url:'../../static/4x/longma/longma06.png'},
			  {url:'../../static/4x/longma/longma07.png'},
			  {url:'../../static/4x/longma/longma08.png'},
			  {url:'../../static/4x/longma/longma09.png'},
			  {url:'../../static/4x/longma/longma10.png'},
			  {url:'../../static/4x/longma/longma11.png'},
			  {url:'../../static/4x/longma/longma12.png'}
		   ],
		   longZhengData:[
			  {url:'../../static/4x/longzheng/longzheng01.png'},
			  {url:'../../static/4x/longzheng/longzheng02.png'},
			  {url:'../../static/4x/longzheng/longzheng03.png'},
			  {url:'../../static/4x/longzheng/longzheng04.png'},
			  {url:'../../static/4x/longzheng/longzheng05.png'},
			  {url:'../../static/4x/longzheng/longzheng06.png'},
			  {url:'../../static/4x/longzheng/longzheng07.png'},
			  {url:'../../static/4x/longzheng/longzheng08.png'},
			  {url:'../../static/4x/longzheng/longzheng09.png'},
			  {url:'../../static/4x/longzheng/longzheng10.png'},
			  {url:'../../static/4x/longzheng/longzheng11.png'},
			  {url:'../../static/4x/longzheng/longzheng12.png'}
		   ],
		   jingSheData:[
			  {url:'../../static/4x/jingshe/jingshe01.png'},
			  {url:'../../static/4x/jingshe/jingshe02.png'},
			  {url:'../../static/4x/jingshe/jingshe03.png'},
			  {url:'../../static/4x/jingshe/jingshe04.png'},
			  {url:'../../static/4x/jingshe/jingshe05.png'},
			  {url:'../../static/4x/jingshe/jingshe06.png'},
			  {url:'../../static/4x/jingshe/jingshe07.png'},
			  {url:'../../static/4x/jingshe/jingshe08.png'},
			  {url:'../../static/4x/jingshe/jingshe09.png'},
			  {url:'../../static/4x/jingshe/jingshe10.png'},
			  {url:'../../static/4x/jingshe/jingshe11.png'},
			  {url:'../../static/4x/jingshe/jingshe12.png'}
		   ],
		   huaSheData:[
			  {url:'../../static/4x/huashe/huashe01.png'},
			  {url:'../../static/4x/huashe/huashe02.png'},
			  {url:'../../static/4x/huashe/huashe03.png'},
			  {url:'../../static/4x/huashe/huashe04.png'},
			  {url:'../../static/4x/huashe/huashe05.png'},
			  {url:'../../static/4x/huashe/huashe06.png'},
			  {url:'../../static/4x/huashe/huashe07.png'},
			  {url:'../../static/4x/huashe/huashe08.png'},
			  {url:'../../static/4x/huashe/huashe09.png'},
			  {url:'../../static/4x/huashe/huashe10.png'},
			  {url:'../../static/4x/huashe/huashe11.png'},
			  {url:'../../static/4x/huashe/huashe12.png'}
		   ],
		   maTaData:[
			  {url:'../../static/4x/mata/mata01.png'},
			  {url:'../../static/4x/mata/mata02.png'},
			  {url:'../../static/4x/mata/mata03.png'},
			  {url:'../../static/4x/mata/mata04.png'},
			  {url:'../../static/4x/mata/mata05.png'},
			  {url:'../../static/4x/mata/mata06.png'},
			  {url:'../../static/4x/mata/mata07.png'},
			  {url:'../../static/4x/mata/mata08.png'},
			  {url:'../../static/4x/mata/mata09.png'},
			  {url:'../../static/4x/mata/mata10.png'},
			  {url:'../../static/4x/mata/mata11.png'},
			  {url:'../../static/4x/mata/mata12.png'}
		   ],
		   wanMaData:[
			   {url:'../../static/4x/wanma/wanma01.png'},
			   {url:'../../static/4x/wanma/wanma02.png'},
			   {url:'../../static/4x/wanma/wanma03.png'},
			   {url:'../../static/4x/wanma/wanma04.png'},
			   {url:'../../static/4x/wanma/wanma05.png'},
			   {url:'../../static/4x/wanma/wanma06.png'},
			   {url:'../../static/4x/wanma/wanma07.png'},
			   {url:'../../static/4x/wanma/wanma08.png'},
			   {url:'../../static/4x/wanma/wanma09.png'},
			   {url:'../../static/4x/wanma/wanma10.png'},
			   {url:'../../static/4x/wanma/wanma11.png'},
			   {url:'../../static/4x/wanma/wanma12.png'}
		   ],
		   yangData:[
			   {url:'../../static/2x/08羊/left-01.png'},
			   {url:'../../static/2x/08羊/left-02.png'},
			   {url:'../../static/2x/08羊/left-03.png'},
			   {url:'../../static/2x/08羊/left-04.png'},
			   {url:'../../static/2x/08羊/left-05.png'},
			   {url:'../../static/2x/08羊/left-06.png'},
			   {url:'../../static/2x/08羊/left-07.png'},
		   ],
		   houData:[
			   {url:'../../static/2x/09猴/left-01.png'},
			   {url:'../../static/2x/09猴/left-02.png'},
			   {url:'../../static/2x/09猴/left-03.png'},
			   {url:'../../static/2x/09猴/left-04.png'},
		   ],
		   jiData:[
			   {url:'../../static/2x/10鸡/left-01.png'},
			   {url:'../../static/2x/10鸡/left-02.png'},
			   {url:'../../static/2x/10鸡/left-03.png'},
			   {url:'../../static/2x/10鸡/left-04.png'},
			   {url:'../../static/2x/10鸡/left-05.png'},
			   {url:'../../static/2x/10鸡/left-06.png'},
		   ],
		   gouData:[
			   {url:'../../static/2x/11狗/left-01.png'},
			   {url:'../../static/2x/11狗/left-02.png'},
			   {url:'../../static/2x/11狗/left-03.png'},
			   {url:'../../static/2x/11狗/left-04.png'},
			   {url:'../../static/2x/11狗/left-05.png'},
			   {url:'../../static/2x/11狗/left-06.png'},
		   ],
		   zhuData:[
			   {url:'../../static/2x/12猪/left-01.png'},
			   {url:'../../static/2x/12猪/left-02.png'},
			   {url:'../../static/2x/12猪/left-03.png'},
			   {url:'../../static/2x/12猪/left-04.png'},
			   {url:'../../static/2x/12猪/left-05.png'},
			   {url:'../../static/2x/12猪/left-06.png'},
			   {url:'../../static/2x/12猪/left-07.png'}
		   ]
		  }
	   },
	   methods:{
		  pdShengXiao(){
			  console.log(this.SXid)
			  switch(this.SXid){
				case 'toushu':
				   this.sliderData = this.touShuData;
				   break;
				case 'shumu':
				   this.sliderData = this.shuMuData;
				   break;
				case 'niuqi':
				   this.sliderData = this.niuQiData;
				   break;
				case 'duiniu':
				   this.sliderData = this.duiNiuData;
				   break;
				case 'ruhu':
				   this.sliderData = this.ruHuData;
				   break;
				case 'hudou':
				   this.sliderData = this.huDouData;
				   break;
				case 'daitu':
				   this.sliderData = this.daiTuData;
				   break;
				case 'tuotu':
				   this.sliderData = this.tuoTuData;
				   break;
				case 'longma':
				   this.sliderData = this.longMaData;
				   break;
				case 'longzheng':
				 this.sliderData = this.longZhengData;
				   break;
				case 'jingshe':
				 this.sliderData = this.jingSheData;
				   break;
				case 'huashe':
				   this.sliderData = this.huaSheData;
				   break;
				case 'mata':
				   this.sliderData = this.maTaData;
				   break;
				case 'wanma':
				   this.sliderData = this.wanMaData;
				   break;
				case 3:
				   this.sliderData = this.huData;
				   break;
				   case 4:
				      this.sliderData = this.tuData;
				      break;
				   case 5:
				      this.sliderData = this.longData;
				      break;
				   case 6:
				      this.sliderData = this.sheData;
				      break;
				   case 7:
				      this.sliderData = this.maTaData;
				   	 break;
				   case 8:
				      this.sliderData = this.wanMaData;
				      break;
				   case 9:
				      this.sliderData = this.houData;
				      break;
				   case 10:
				    this.sliderData = this.jiData;
				      break;
				   case 11:
				    this.sliderData = this.gouData;
				      break;
				   case 12:
				      this.sliderData = this.zhuData;
				      break;
				default:
					break;
			  }
			  //判断生肖大小的分类//老鼠，兔，蛇 //牛，虎，龙，马，猪 //羊，猴，鸡，狗 
			  switch(this.SXid){
			    case 'toushu':
			       this.shengxiaoImg1()
			       break;
			    case 'shumu':
			       this.shengxiaoImg2()
			  	 break;
			    case 'niuqi':
			       this.shengxiaoImg1()
			  	 break;
			    case 'duiniu':
			       this.shengxiaoImg2()
			  	 break;
			    case 'ruhu':
			       this.shengxiaoImg1()
			  	 break;
			    case 'hudou':
			       this.shengxiaoImg2()
			  	 break;
			    case 'daitu':
			       this.shengxiaoImg1()
			    	 break;
			    case 'tuotu':
			       this.shengxiaoImg2()
			  	 break;
			    case 'longma':
			       this.shengxiaoImg1()
			  	 break;
			    case 'longzheng':
			       this.shengxiaoImg2()
			  	 break;
			    case 'jingshe':
			       this.shengxiaoImg1()
			  	 break;
			    case 'huashe':
			       this.shengxiaoImg2()
			  	 break;
				 case 'mata':
				    this.shengxiaoImg1()
				  break;
				 case 'wanma':
				    this.shengxiaoImg2()
				  break;
			    default:
			  	  break;
			  }
			  
		  },
		  shengxiaoImg1(){
				//   console.log(this.sliderData)
				  let i = 0
				  // console.log(this.sliderData.length)
			 this.SXtimer1 = setInterval(()=>{
				      i++
				  	if(i > this.sliderData.length - 1){
				        i = 0
				  	}
				  	// console.log(this.sliderData[i].url)
				  	this.$refs.img1.src = this.sliderData[i].url
				  },100)
				  this.$refs.img1.style.display = 'block'
				  this.$refs.img2.style.display = 'none'
			  },
			  shengxiaoImg2(){
			//   console.log(this.sliderData)
				 let i = 0
			// console.log(this.sliderData.length)
			this.SXtimer2 = setInterval(()=>{
					i++
			    if(i > this.sliderData.length - 1){
						i = 0
					}
				// console.log(this.sliderData[i].url)
				this.$refs.img2.src = this.sliderData[i].url
				},100)
				this.$refs.img2.style.display = 'block'
				this.$refs.img1.style.display = 'none'
		 },
		  clearButton1(){
			  clearInterval(this.SXtimer1)
			  console.log('我被清楚了1')
		  },
		  clearButton2(){
		  	  clearInterval(this.SXtimer2)
		  	  console.log('我被清楚了2')
		  }
	   },
	  created(){
		Bus.$on('SendSXID',(SXID)=>{
            this.SXid = SXID
			console.log(SXID)
			console.log(this.SXid)
		})
		Bus.$on('ClearButton',(Btn)=>{
			this.ClearButton = Btn
			console.log(Btn)
		})
		Bus.$on('ClearInter',()=>{
			this.clearButton1()
			this.clearButton2()
		})
	  },
	  watch:{
		SXid(newVal,oldVal){
			console.log(newVal)
            if(newVal != ''){
				this.pdShengXiao()
			}
		},
		ClearButton(newVal,oldVal){
		    if(newVal == 'ClearButton1'){
				this.clearButton2()
				console.log('我执行了')
			}else{
				this.clearButton1()
			}
		}
	  }

   }
  
  </script>
  
  <style scoped>
  .photo1 {
	position: relative;
	width: 100vh;
	height: 10vh;
	font-size: 20px;
	/* background-color: pink; */
  }   
  
  .Img1 {
	display: none;
	position: absolute;
	top: -20px;
	left: 120px;
	width: 40vw;
	height: 40vw;
	/* margin-left: 150px; */
  }
  .Img2 {
  	display: none;
  	position: absolute;
  	top: 0px;
  	left: 120px;
  	width: 40vw;
	/* height: 40vw; */
  	/* margin-left: 150px; */
  }
  
  
  
  
  </style>
  